<template>
  <div class="app-container home" style="padding: 10px; background-color: #f8f8f8">
    <!-- 地图和设备统计 -->
    <el-row :gutter="20" style="margin: 10px 0px 20px 0px">
      <!-- 地图组件 -->
      <el-col :xs="24" :sm="24" :md="24" :lg="20" :xl="20">
        <map-component style="height: 650px" ref="map" :deviceInfo="deviceFormatData"></map-component>
      </el-col>
      <!-- 设备统计 -->
      <el-col :xs="24" :sm="24" :md="24" :lg="4" :xl="4">
        <el-card shadow="none" style="border: none">
          <h3 style="font-weight: bold">
            <i class="el-icon-s-data"></i>
            智能铁鞋设备统计
          </h3>
          <el-row :gutter="20" class="panel-group">
            <!-- 设备数量 -->
            <el-col :span="24" class="card-panel-col">
              <div class="card-panel">
                <div class="card-panel-icon-wrapper icon-blue">
                  <svg-icon icon-class="device" class-name="card-panel-icon" />
                </div>
                <div class="card-panel-description">
                  <div class="card-panel-text">设备数量</div>
                  <count-to :start-val="0" :end-val="deviceStatistic.deviceCount" :duration="3000" class="card-panel-num" />
                </div>
              </div>
            </el-col>

            <!-- 产品数量 -->
            <el-col :span="24" class="card-panel-col">
              <div class="card-panel">
                <div class="card-panel-icon-wrapper icon-blue">
                  <svg-icon icon-class="model" class-name="card-panel-icon" />
                </div>
                <div class="card-panel-description">
                  <div class="card-panel-text">产品数量</div>
                  <count-to :start-val="0" :end-val="deviceStatistic.productCount" :duration="1000" class="card-panel-num" />
                </div>
              </div>
            </el-col>

            <!-- 操作记录 -->
            <el-col :span="24" class="card-panel-col">
              <div class="card-panel">
                <div class="card-panel-icon-wrapper icon-blue">
                  <svg-icon icon-class="log-a" class-name="card-panel-icon" />
                </div>
                <div class="card-panel-description">
                  <div class="card-panel-text">操作记录</div>
                  <count-to :start-val="0" :end-val="deviceStatistic.functionCount" :duration="2000" class="card-panel-num" />
                </div>
              </div>
            </el-col>
            <!-- 监测数据 -->
            <el-col :span="24" class="card-panel-col">
              <div class="card-panel">
                <div class="card-panel-icon-wrapper icon-red">
                  <svg-icon icon-class="monitor-a" class-name="card-panel-icon" />
                </div>
                <div class="card-panel-description">
                  <div class="card-panel-text">监测数据</div>
                  <count-to :start-val="0" :end-val="deviceStatistic.monitorCount" :duration="3000" class="card-panel-num" />
                </div>
              </div>
            </el-col>
            <!-- 告警数量 -->
            <el-col :span="24" class="card-panel-col">
              <div class="card-panel">
                <div class="card-panel-icon-wrapper icon-red">
                  <svg-icon icon-class="alert" class-name="card-panel-icon" />
                </div>
                <div class="card-panel-description">
                  <div class="card-panel-text">告警数量</div>
                  <count-to :start-val="0" :end-val="deviceStatistic.alertCount" :duration="1000" class="card-panel-num" />
                </div>
              </div>
            </el-col>
            <!-- 上报事件 -->
            <el-col :span="24" class="card-panel-col">
              <div class="card-panel">
                <div class="card-panel-icon-wrapper icon-red">
                  <svg-icon icon-class="event-a" class-name="card-panel-icon" />
                </div>
                <div class="card-panel-description">
                  <div class="card-panel-text">上报事件</div>
                  <count-to :start-val="0" :end-val="deviceStatistic.eventCount" :duration="2000" class="card-panel-num" />
                </div>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>

    <!-- 信息栏 -->
    <el-row>
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <el-card shadow="none" style="margin-top: 5px; height: 200px">
          <h3 style="font-weight: bold; margin-bottom: 10px">
            <i class="el-icon-s-order"></i>
            信息栏
          </h3>
          <div
            style="cursor: pointer; display: table; width: 100%; line-height: 36px"
            @click="openDetail(item.noticeId)"
            v-for="item in noticeList"
            :key="item.noticeId"
          >
            <div style="display: table-cell; padding-right: 10px">
              <el-tag size="mini" effect="dark" type="warning" v-if="item.noticeType == 2">公告</el-tag>
              <el-tag size="mini" effect="dark" v-else>信息</el-tag>
              {{ item.noticeTitle }}
            </div>
            <div style="display: table-cell; width: 90px; font-size: 14px">
              <i class="el-icon-time"></i>
              {{ parseTime(item.createTime, '{y}-{m}-{d}') }}
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="Index" lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
import { initWebSocket } from '@/utils/websocket';
import { listDevice } from '@/api/zntx-app/device';
import { listCalibrate } from '@/api/zntx-app/calibrate';
import {CountTo} from 'vue3-count-to';


// 定义变量
let timer: number | undefined;
const calibGpsPints = ref([]);
const calibPagePoints = ref([]);
const deviceCount = ref(0);
const deviceList = ref([]);
const deviceStatistic = ref({
  deviceCount: 0, // 初始值设为0，以便于看到动画效果
  monitorCount: 0,
  productCount: 0,
  alertCount: 0,
  functionCount: 0,
  eventCount: 0,
});
const noticeList = ref([
  { noticeId: 1, noticeType: 1, noticeTitle: '系统维护通知', createTime: '2023-10-01' },
  { noticeId: 2, noticeType: 2, noticeTitle: '设备维护信息', createTime: '2023-09-28' },
]);
const map = ref(null);
const deviceFormatData = ref([]);

// 生命周期钩子
onMounted(async () => {
  loadDevices();
  // 初始化 WebSocket
  let protocol = window.location.protocol === 'https:' ? 'wss://' : 'ws://';
  let url_socket = protocol + window.location.host + import.meta.env.VITE_APP_BASE_API + '/resource/websocket';
  initWebSocket(url_socket);

  // 定时加载设备数据
  timer = window.setInterval(async () => {
    await loadDevices();
  }, 500000);
});
const parseTime = (time: string | number | Date, format: string): string => {
  const date = new Date(time);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');

  if (format === '{y}-{m}-{d}') {
    return `${year}-${month}-${day}`;
  }
  // 可以根据需要扩展其他格式
  return `${year}-${month}-${day}`;
};
onUnmounted(() => {
  window.clearInterval(timer);
});

// 方法
const goTarget = (url: string) => {
  window.open(url, '__blank');
};

const openDetail = (noticeId: number) => {
  console.log('打开通知详情', noticeId);
};

// 加载设备数据
const loadDevices = async () => {
  const data_i = {
    deviceCount: 150,
    monitorCount: 1200,
    productCount: 50,
    alertCount: 25,
    functionCount: 300,
    eventCount: 450,
  };
  deviceStatistic.value = data_i; // 使用 Vue 的响应式系统更
  console.log('Updated deviceStatistic:', deviceStatistic.value); // 打印更新后的值
  deviceFormatData.value = [];
  const data = await listDevice();
  console.log('listDevice', data);
  deviceFormatData.value = data.rows.map((item) => {
    return {
      deviceId: item.deviceId,
      status: item.status,
      deviceName: item.deviceName,
      energy: item.energy,
      latitude:item.latitude,
      longitude:item.longtitude,
      location: {
        x: item.pixelLocation.Latitude,
        y: item.pixelLocation.Longitude,
      },
    };
  });
};
</script>

<style scoped lang="scss">
.card-panel-num {
  font-size: 24px;
  font-weight: bold;
  color: #333; /* 确保文字颜色可见 */
  /* 添加以下样式以确保数字在卡片内正确显示 */
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }

  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }

  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: 'open sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}

.panel-group {
  .card-panel-col {
    margin-bottom: 26px;
  }

  .card-panel {
    height: 68px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    color: #666;
    border: 1px solid #eee;
    border-radius: 5px;
    background-color: #fff;

    &:hover {
      .card-panel-icon-wrapper {
        color: #fff;
      }

      .icon-blue {
        background: #36a3f7;
      }

      .icon-red {
        background: #f56c6c;
      }
    }

    .icon-blue {
      color: #36a3f7;
    }

    .icon-red {
      color: #f56c6c;
    }

    .card-panel-icon-wrapper {
      float: left;
      margin: 10px;
      padding: 10px;
      transition: all 0.38s ease-out;
      border-radius: 6px;
    }

    .card-panel-icon {
      float: left;
      font-size: 30px;
    }

    .card-panel-description {
      float: right;
      font-weight: bold;
      margin: 15px;
      margin-left: 0px;

      .card-panel-text {
        line-height: 14px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 14px;
        margin-bottom: 12px;
        text-align: right;
      }

      .card-panel-num {
        font-size: 18px;
      }
    }
  }
}
</style>
